<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ device.name }} - 巡检详情</title>
    <link rel="stylesheet" href="../static/css/style.css">
</head>
<body>
    <div class="navbar">
        <a href="../index.html">首页</a>
        <a href="#">今日巡检报告</a>
        <a href="#" class="active">设备详细信息</a>
    </div>

    <div class="container">
        <h1>{{ device.name }} - 巡检数据</h1>
        <div class="device-meta">
            <span class="meta-item">类型: {{ "服务器" if device.type == "server" else "网络设备" }}</span>
            <span class="meta-item">状态:
                <span class="status-badge status-{{ device.status }}">
                    {% if device.status == "offline" %}离线
                    {% elif device.status == "warning" %}警告
                    {% elif device.status == "unknown" %}未知
                    {% else %}在线{% endif %}
                </span>
            </span>
            <span class="meta-item">最后检查: {{ device.latest_check }}</span>
        </div>

        <div class="date-selector">
            <select id="month-select">
                <option value="">选择月份</option>
                {% for month in available_months %}
                <option value="{{ month }}">{{ month }}</option>
                {% endfor %}
            </select>
            <button onclick="loadDeviceData()" class="btn">加载数据</button>
            <a href="../index.html" class="btn">返回首页</a>
        </div>

        <div id="data-container">
            <table class="device-data">
                <thead>
                    <tr>
                        {% if device.time_column %}<th>{{ device.time_column }}</th>{% endif %}
                        {% for col in device.columns %}
                        <th>{{ col }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for row in device.rows %}
                    <tr>
                        {% if device.time_column %}
                        <td>{{ row[device.time_column] }}</td>
                        {% endif %}
                        {% for col in device.columns %}
                        <td class="{{ highlight_cell(row[col] if col in row else '') }}">
                            {% if 'login error' in str(row.get(col, '')).lower() %}
                            <span class="login-error">通信失败</span>
                            {% elif not row.get(col) %}
                            <span class="no-data">N/A</span>
                            {% else %}
                            {{ row[col] }}
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <script src="../static/js/scripts.js"></script>
</body>
</html>
